import React, {useEffect} from 'react';
import {Button, Col, DatePicker, Form, Input, Modal, Row, Select,} from 'antd';
import {filterEmpty} from '@/utils/methods';
import {formInputRules, formTextAreaRules, phoneRules} from '@/utils/rules';
import {addOrModifyEmergencyPlan, queryEmergencyplan,} from '@/services/emergency';
import moment from 'dayjs';
import {useRequest} from "ahooks";
import RegionCascader from "@/components/RegionCascader";
import useRegions from "@/hooks/useRegions";
import {EmergencyPlanLevelMap, EmergencyPlanMap} from "@/enums/emergency/map";


const EditPlanModal: React.FC<any> = ({planId, onSuccess, dispatch, ...props}: any) => {
  const [form] = Form.useForm();
  const [regions] = useRegions();
  const {
    run: runPlan,
    loading: loadingPlan
  } = useRequest((values) => {
    const params = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    params.validateTime &&
    (params.validateTime = params.validateTime.format('YYYY-MM-DD HH:mm:ss'));
    planId && (params.id = planId);
    return addOrModifyEmergencyPlan(params)
  }, {
    manual: true,
    onSuccess(res: any) {
      dispatch({
        clear: true,
        open: false
      })
      onSuccess && onSuccess(res);
    }
  })
  const {
    run: runDetail,
  } = useRequest(() => {
    return queryEmergencyplan({
      id: planId,
    }).then((res: any) => {
      form.setFieldsValue({
        aim: res.aim,
        level: res.level.toString(),
        eventClassification: res.eventClassification,
        applyScope: res.applyScope,
        orgSystem: res.orgSystem,
        delDept: res.delDept,
        telephone: res.telephone,
        type: res.type,
        demo: res.demo,
        accordingTo: res.accordingTo,
        name: res.name,
        duty: res.duty,
        editDept: res.editDept,
        workRule: res.workRule,
        zoneCode: res.zoneCode,
        fileId: res.fileId,
        validateTime: moment(res.validateTime),
      });
      return res
    })
  }, {
    manual: true
  })

  useEffect(() => {
    if (props.open) {
      planId && runDetail();
    } else {
      form.resetFields();
    }
  }, [props.open]);
  return (
    <Modal
      {...props}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={[
        <Button key="cancel" onClick={() => {
          dispatch({
            clear: true,
            open: false
          })
        }}>
          关闭
        </Button>,
        <Button
          type="primary"
          loading={loadingPlan}
          onClick={async () => {
            const value: any = await form.validateFields()
            runPlan(value)
          }}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form} labelCol={{span: 6, offset: 0}}>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="name"
              label="预案名称"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写预案名称',
                },
              ]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="level"
              label="预案层次"
              rules={[
                {
                  required: true,
                  message: '请选择预案层次',
                },
              ]}
            >
              <Select placeholder="请选择" options={EmergencyPlanLevelMap.toOption()}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="zoneCode"
              label="所属区域"
              style={{marginBottom: 0}}
            >
              <RegionCascader placeholder="请选择行政区划" options={regions}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="type"
              label="事件类型"
              rules={[
                {
                  required: true,
                  message: '请选择事件类型',
                },
              ]}
            >
              <Select placeholder="请选择" options={EmergencyPlanMap.toOption()}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="delDept"
              label="牵头单位"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写牵头单位',
                },
              ]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="telephone"
              label="联系方式"
              rules={[
                ...phoneRules,
                {
                  required: true,
                  message: '请填写联系方式',
                },
              ]}
              validateTrigger="onBlur"
            >
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="editDept"
              label="主编单位"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写主编单位',
                },
              ]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="validateTime"
              label="生效日期"
              rules={[
                {
                  required: true,
                  message: '请选择生效日期',
                },
              ]}
            >
              <DatePicker/>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
          name="aim"
          label="编制目的"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="accordingTo"
          label="编制依据"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="applyScope"
          label="适用范围"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="workRule"
          label="工作原则"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="orgSystem"
          label="指挥体系"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="duty"
          label="职责"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="eventClassification"
          label="事件分级说明"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="demo"
          label="备注"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Form.Item
          name="fileId"
          label="附件"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea/>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default EditPlanModal;
